<template>
  <div>
    <!--  折叠面板-->
    <el-collapse v-model="activeNames" accordion>
      <el-collapse-item :title="formatTitle(order)" :name="order.oid" v-for="order in tableData" :key="order.id">
        <!--     面板内容-->
        <el-row>
          <el-col :span="8"><strong>顾客编号：</strong>{{order.cid}}</el-col>
          <el-col :span="8"><strong>下单员工编号：</strong>{{order.sid}}</el-col>
          <el-col :span="8"><strong>下单时间：</strong>{{formatTime(order)}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="8"><strong>总金额(元)：</strong>{{order.total}}</el-col>
          <el-col :span="16"></el-col>
        </el-row><br>
        <el-row>
          <el-col :span="24">
            <!--      循环展示每个商品-->
            <div v-for="(item, index) in order.prodectName" :key="index">
              <h4>{{item.name}}</h4>
              <p>数量：{{item.num}}</p>
              <p>糖分：{{item.sugar === 0 ? '正常' : item.sugar === 1 ? '七分糖' : item.sugar === 2 ? '五分糖' : item.sugar === 3 ? '三分糖' : '无糖'}}</p>
              <p>冰度：{{item.ice === 0 ? '常温' : item.ice === 1 ? '冰' : '热'}}</p>
            </div>
          </el-col>
        </el-row>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from 'vue'
import { Search } from '@element-plus/icons-vue'
import type { TableColumnCtx, TableInstance } from 'element-plus'
import { reactive,computed } from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import axios from "axios";

// 表格数据
const tableData = ref([])// 格式化面板标题
// 设置折叠面板激活状态（默认激活第一个面板）
const activeNames = ref([tableData.value[0]?.id])

// 使用axios.get()方法获取用户列表
// 在组件挂载后执行回调函数
onMounted(() => {
  getData()
})

// 获取当前页数据
const getData = () => {
  axios.get("http://192.168.166.182:8080/orderForm/ordered")
      .then(response => {
        console.log(response.data)
        tableData.value  = response.data.records;
      }).catch(error => {
    console.error(error);
  })
}

//排序
const handleSortChange = (sortData) => {
  //解构sortData参数，得到prop和order两个属性
  const { prop,order } = sortData;
  //使用sort方法对当前页面数据进行排序，并更新其值
  tableData.value = tableData.value.sort((a,b) => {
    if(order === 'ascending') { //升序
      return a[prop] === b[prop] ? a.id - b.id : a[prop] > b[prop] ? 1 : -1;
    } else { //降序
      return a[prop] === b[prop] ? a.id - b.id : a[prop] < b[prop] ? 1 : -1;
    }
  });
}

// 格式化时间
const formatTime = (row) => {
  const date = new Date(row.time);
  const year = date.getFullYear();
  const month = ("0" + (date.getMonth() + 1)).slice(-2);
  const day = ("0" + date.getDate()).slice(-2);
  const hour = ("0" + date.getHours()).slice(-2);
  const minute = ("0" + date.getMinutes()).slice(-2);

  return `${year}-${month}-${day} ${hour}:${minute}`;
}

const formatTitle = (order) => order && order.oid ? `订单 ${order.oid}` : ''


</script>

<style>
.input-with-select .el-input-group__prepend {
  background-color: var(--el-fill-color-blank);
}
.demo-pagination-block {
  margin-top: 10px;
}
.mt-4 {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}
.bt1 {
  margin-left: 15px;
}
</style>
